<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <style>
        /* 页面样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f5f5f5;
        }

        .header {
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: #e8f5e9;
            padding: 10px;
        }

        .header div {
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
        }

        .search-bar {
            display: flex;
            justify-content: center;
            padding: 10px;
        }

        .search-bar input {
            width: 80%;
            padding: 8px;
            border-radius: 20px;
            border: 1px solid #ccc;
        }

        .content {
            padding: 20px;
        }

        .recommendation, .playlist {
            margin-bottom: 20px;
            display: flex;
            
        }

        .recommendation img, .playlist img {
            width: 100px;
            height: 100px;
            margin-right: 30px;
            border-radius: 8px;
        }

        .recommendation h3, .playlist h3 {
            font-size: 20px;
            margin: 10px 0;
        }

        .hover-effect {
            transition: transform 0.3s ease-in-out;
        }

        .hover-effect:hover {
            transform: scale(1.1);
        }

        /* 底部导航样式 */
        #bnav{
            /* 固定定位 左下角*/
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 9;
            background-color: #e8f5e9; /* 导航背景颜色 */
            padding: 10px 0; /* 导航内边距 */
        }
        #bnav ul{
            display: flex;
        }
        #bnav li{
            width:20%;
            text-align: center;
        }
        #bnav svg{
            width: 24px; /* 调整SVG图标宽度 */
            height: 24px; /* 调整SVG图标高度 */
            margin: 5px auto; /* SVG图标外边距 */
        }
        #bnav p{
            font-size: 14px; /* 文字大小 */
            color: #333; /* 文字颜色 */
        }
    </style>
    <!-- 第一步：引入项目下面生成的 fontclass 代码： -->
    <script src="./font/iconfont.js"></script>
    <link rel="stylesheet" href="./pub.css">
</head>
<body>
    <!-- 顶部导航 -->
    <div class="header">
        <div>推荐</div>
        <a href="./leguan.html"><div>乐馆</div></a>
        <div>助眠</div>
        <div>儿童</div>
        <div>会员</div>
        <div>金币</div>
    </div>

    <!-- 搜索栏 -->
    <div class="search-bar">
        <input type="text" placeholder="权志龙新歌 正在热搜">
    </div>
    
    <!-- 主内容区 -->
    <div class="content">
        <!-- 猜你喜欢模块 -->
        <h3>猜你喜欢</h3>
        <div class="recommendation">
            <div>
                <img class="hover-effect" src="./img/300.webp" alt="推荐音乐">
                <p>普通朋友 - 陶喆</p>
            </div>
            <div>
                <img class="hover-effect" src="./img/303.webp" alt="推荐音乐">
                <p>每日30首</p>
            </div>
            <div>
                <img class="hover-effect" src="./img/304.webp" alt="推荐音乐">
                <p>形容 - 沈以诚</p>
            </div>
        </div>
        <h3>你的歌单补给站</h3>
        <!-- 歌单补给站模块 -->
        <div class="playlist">
            <div>
                <img class="hover-effect" src="./img/301.webp" alt="推荐歌单">
                <p>听歌都会哭的人</p>
            </div>
            <div>
                <img class="hover-effect" src="./img/305.webp" alt="推荐歌单">
                <p>学习必听的歌</p>
            </div>
            <div>
                <img class="hover-effect" src="./img/306.webp" alt="推荐歌单">
                <p>那些难以释怀的歌</p>
            </div>
        </div>
        <h3>听「周鹏霄」的也在听</h3>
        <!-- 周杰伦推荐模块 -->
        <div class="recommendation">
            <div>
                <img class="hover-effect" src="./img/302.webp" alt="推荐音乐">
                <p>告白气球 - 周杰伦</p>
            </div>
            <div>
                <img class="hover-effect" src="./img/307.webp" alt="推荐音乐">
                <p>爱情转移 - 陈奕迅</p>
            </div>
            <div>
                <img class="hover-effect" src="./img/308.webp" alt="推荐音乐">
                <p>枫 - 周杰伦</p>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <nav id="bnav">
        <ul>
            <li>
                <a href="./index.html">
                    <span>
                        <!-- SVG图标结构 -->
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-QQyinle"></use>
                        </svg>
                    </span>
                    <p>首页</p>
                </a>
            </li>
            <li>
                <a href="./zhibo.html">
                    <span>
                        <!-- SVG图标结构 -->
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-kejian"></use> 
                        </svg>
                    </span>
                    <p>直播</p>
                </a>
            </li>
            <li>
                <a href="./leida.html">
                    <span>
                        <!-- SVG图标结构 -->
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-redian"></use>
                        </svg>
                    </span>
                    <p>雷达</p>
                </a>
            </li>
            <li>
                <a href="./shequ.html">
                    <span>
                        <!-- SVG图标结构 -->
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-shequ"></use>
                        </svg>
                    </span>
                    <p>社区</p>
                </a>
            </li>
            <li>
                <a href="./wode.html">
                    <span>
                        <!-- SVG图标结构 -->
                        <svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-wode"></use>
                        </svg>
                    </span>
                    <p>我的</p>
                </a>
            </li>
        </ul>
    </nav>
    
    <script>
        // 页面动态高亮顶部和底部导航
        const headerItems = document.querySelectorAll(".header div");
        const footerItems = document.querySelectorAll("#bnav li");

        headerItems.forEach(item => {
            item.addEventListener("click", () => {
                headerItems.forEach(i => i.style.color = "black");
                item.style.color = "green";
            });
        });

        footerItems.forEach(item => {
            item.addEventListener("click", () => {
                footerItems.forEach(i => {
                    i.querySelector('p').style.color = "black";
                });
                item.querySelector('p').style.color = "green";
            });
        });
    

        // 搜索栏动态效果
        const searchBar = document.querySelector(".search-bar input");
        searchBar.addEventListener("focus", () => {
            searchBar.style.border = "2px solid green";
        });

        searchBar.addEventListener("blur", () => {
            searchBar.style.border = "1px solid #ccc";
        });

        // 鼠标悬停图片放大效果（已在 CSS 中实现）
        const images = document.querySelectorAll(".hover-effect");
        images.forEach(img => {
            img.addEventListener("mouseover", () => {
                img.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.2)";
            });
            img.addEventListener("mouseout", () => {
                img.style.boxShadow = "none";
            });
        });

        // 点击图片跳出警告栏
        const musicItems = document.querySelectorAll(".recommendation img, .playlist img");
        musicItems.forEach(item => {
            item.addEventListener("click", () => {
                alert("播放功能暂未实现！");
            });
        });
    </script>
</body>
</html>